<template>
  <div class="person">
    <h1>情况三：监视【reactive】定义的【对象类型】数据</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>姓名：{{ person.age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改人</button>
  </div>
</template>
<script setup lang="ts">
import {reactive, watch} from "vue";
// 数据
// reactive定义的对象不可整体修改
let person = reactive({
  name: '张三',
  age: 18
})

function changeName() {
  person.name += '~'
}

function changeAge() {
  person.age += 1
}

function changePerson() {
  // reactive定义的对象不可整体修改
  // person = {name: '李四', age: 20}
  // √——相当于逐个属性赋值
  Object.assign(person,{name: '李四', age: 20})
}

// 监视，监视【reactive】定义的【对象类型】的数据，且默认是开启深度监视的
watch(person, (n, o) => {
  console.log('能监视到changeName/changeAge/changePerson方法', n, o)
})
</script>
<style scoped>
.person {
  background-color: #e7abab;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}
</style>